<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>体检预约表单</title>
  <!-- 引入 Vue 3 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <!-- 引入 Element Plus -->
  <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
  <!-- 引入 Element Plus 样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
  <!-- Import style -->
  <link rel="stylesheet" href="css/element-plus index.css" />
  <!-- Import Vue 3 -->
  <script src="js/vue.global.js"></script>
  <!-- Import component library -->
  <script src="js/element-plus index.full.js"></script>
  <script src="js/Element Plus Icons Vue.iife.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
  </style>
</head>
<body>
	<!-- 创建一个预约按钮 -->
	<button aria-disabled="false" type="button" class="el-button el-button--primary" >
		<span class>预约</span>
	</button>
  <div id="app">
    <!-- 基本信息 -->
    <h3>基本信息</h3>
    <el-descriptions title="" :column="3" border>
      <el-descriptions-item label="体检单号">
        <el-input v-model="form.medicalRecordNumber"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="性别">
        <el-select v-model="form.gender" placeholder="选择性别">
          <el-option label="男士" value="male"></el-option>
          <el-option label="未婚女士" value="female1"></el-option>
		  <el-option label="已婚女士" value="female2"></el-option>
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item label="手机号">
        <el-input v-model="form.phoneNumber"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="出生日期">
        <el-date-picker v-model="form.birthDate" type="date" placeholder="Pick a day"></el-date-picker>
      </el-descriptions-item>
      <el-descriptions-item label="身份证号">
        <el-input v-model="form.idCard"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="家庭住址">
        <el-input v-model="form.address"></el-input>
      </el-descriptions-item>
    </el-descriptions>

    <!-- 预约信息 -->
    <h3>预约信息</h3>
    <el-descriptions title="" :column="2" border>
      <el-descriptions-item label="预约院区">
        <el-select v-model="appointmentInfo.hospitalArea" placeholder="选择院区地址">
          <el-option label="沈阳熙康云医院-浑南院区" value="areaA"></el-option>
          <el-option label="沈阳熙康云医院-三好街院区" value="areaB"></el-option>
		  <el-option label="沈阳熙康云医院-世纪大厦" value="areaC"></el-option>
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item label="院区描述">
        <el-input type="textarea" v-model="appointmentInfo.hospitalDescription"></el-input>
      </el-descriptions-item>
    </el-descriptions>

    <!-- 预约详情 -->
    <h3>预约详情</h3>
    <el-descriptions title="" :column="8" border>
      <el-descriptions-item label="预约类型">
        <el-select v-model="appointmentDetails.type" placeholder="预约类型">
          <el-option label="团体预约" value="typeA"></el-option>
          <el-option label="个检预约" value="typeB"></el-option>
        </el-select>
      </el-descriptions-item>
	  <el-descriptions-item label="预约套餐">
	    <el-select v-model="appointmentDetails.type" placeholder="预约套餐">
	      <el-option label="23东软家属已婚女士套餐A" value="typeA"></el-option>
	      <el-option label="23东软家属已婚女士套餐B" value="typeB"></el-option>
		  <el-option label="23东软家属已婚女士套餐C" value="typeC"></el-option>
		  <el-option label="23东软家属已婚女士套餐D" value="typeD"></el-option>
	    </el-select>
	  </el-descriptions-item>
	  <el-descriptions-item label="体检时间">
	    <el-date-picker v-model="form.birthDate" type="date" placeholder="Pick a day"></el-date-picker>
	    </el-select>
	  </el-descriptions-item>
      <el-descriptions-item label="体检时段">
        <el-select v-model="appointmentDetails.timeSlot" placeholder="体检时段">
          <el-option label="上午" value="slotA"></el-option>
          <el-option label="下午" value="slotB"></el-option>
        </el-select>
      </el-descriptions-item>
	  <el-descriptions-item label="套餐价格">
	    <el-select v-model="appointmentDetails.type" placeholder="1500">
	    </el-select>
	  </el-descriptions-item>
	  <el-descriptions-item label="优惠补贴">
	    <el-select v-model="appointmentDetails.type" placeholder="400">
	    </el-select>
	  </el-descriptions-item>
	  
      <el-descriptions-item label="结算金额">
		  <el-select v-model="appointmentDetails.type" placeholder="1100">
        <el-input v-model="appointmentDetails.settlementAmount"></el-input>
      </el-descriptions-item>
	  <el-descriptions-item label="结算类别">
	    <el-select v-model="appointmentDetails.type" placeholder="预约类型">
	      <el-option label="支付宝" value="typeA"></el-option>
	      <el-option label="微信" value="typeB"></el-option>
		  <el-option label="医保" value="typeC"></el-option>
		  <el-option label="现金" value="typeD"></el-option>
		  <el-option label="银行卡" value="typeE"></el-option>
	    </el-select>
	  </el-descriptions-item>
    </el-descriptions>

    <!-- 套餐详情 -->
    <h3>套餐详情</h3>
    <el-descriptions title="" :column="1" border>
      <template v-for="(detail, index) in packageDetails" :key="index">
        <el-descriptions-item :label="detail.checkItem">
          <p><strong>检查内容:</strong> {{ detail.checkContent }}</p>
          <p><strong>检查意义:</strong> {{ detail.checkSignificance }}</p>
        </el-descriptions-item>
      </template>
    </el-descriptions>
  </div>

  <script>
	<!-- 从Vue中导入createApp方法 -->  
    const { createApp } = Vue;

	<!-- 定义Vue应用主组件 -->
    const App = {
		<!-- 数据函数，返回组件的所有响应式数据 -->
      data() {
        return {
			<!-- 患者基本信息表单对象 -->
          form: {
            medicalRecordNumber: '',
            name: '',
            gender: '',
            phoneNumber: '',
            birthDate: '',
            idCard: '',
            address: ''
          },
		  
		  <!-- 预约医院信息对象 -->
          appointmentInfo: {
            hospitalArea: '',
            hospitalDescription: ''
          },
		  
		  <!-- 预约详情对象 -->
          appointmentDetails: {
            type: '',
            timeSlot: '',
            settlementAmount: ''
          },
		  
		  <!-- 检查套餐详情数组 -->
          packageDetails: [
            {
              checkItem: '肺部CT',
              checkContent: 'CT检查【肺部-平扫】',
              checkSignificance: '用于检查肺部有无良性恶性肿瘤、结核、炎症和间质性弥漫性疾病等。'
            },
            {
              checkItem: '头部CT',
              checkContent: '头颅骨CT',
              checkSignificance: 'CT检查头部影像'
            },
            {
              checkItem: '肿瘤两项',
              checkContent: '癌胚抗原测定（定量）,甲胎蛋白测定',
              checkSignificance: '癌胚抗原：系广谱性肿瘤标志物，对大肠癌、胰腺癌的筛查、疗效观察和预后评估有重要的临床意义。\n在胃、乳腺、肺癌等也可升高。 甲胎蛋白：对原发性肝癌的诊断、疗效观察和预后评估有重要的临床意义。\n在卵巢、胃、胰腺癌、睾丸癌等肿瘤及肝炎、肝硬化等疾病也有异常发现。孕期可出现升高。'
            },
            {
              checkItem: 'C13呼气试验',
              checkContent: 'C13呼气试验',
              checkSignificance: '空腹 ，一个月以内使用过抗生素和胃药者不宜做此检查。\n13碳-尿素呼气试验阳性示有幽门螺杆菌感染，它与胃部炎症、消化性溃疡、胃癌的发生密切关联。'
            },
            {
              checkItem: '甲功三项',
              checkContent: '血清游离甲状腺素测定',
              checkSignificance: '判断甲状腺功能，鉴别免疫性疾病'
            },
            {
              checkItem: '颈动脉彩超',
              checkContent: '彩色多普勒超声检查【颈动脉】',
              checkSignificance: '通过彩色超声仪器采用无创性检查方法，检测颈动脉结构和动脉粥样硬化斑形态、范围、性质、动脉狭窄程度等；\n早期发现动脉血管病变，为有效预防和减少冠心病、缺血性脑血管病等心脑血管疾病发病提供客观的血流动力学依据。'
            }
          ]
        };
      }
    };

	<!-- 创建Vue应用实例 -->
    const app = createApp(App);
	<!-- 使用ElementPlus UI库 -->
    app.use(ElementPlus);
	<!-- 将应用挂载到DOM元素#app上 -->
    app.mount('#app');
  </script>
</body>
</html>



